<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${message("历史轨迹")}</title>
<link href="/resources/css/common.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="/resources/images/lock-head-logo.png" type="image/x-icon"/>
<script type="text/javascript" src="/resources/js/reference/jquery.js"></script>
<script type="text/javascript" src="/resources/js/base/dialog.js"></script>
<script type="text/javascript" src="/resources/js/reference/jquery.validate.js"></script>
<script type="text/javascript" src="/resources/js/base/request.js"></script>
<script type="text/javascript" src="/resources/js/base/global.js"></script>
<script type="text/javascript" src="/resources/js/reference/mmGrid.js"></script>
<script type="text/javascript" src="/resources/plugin/datePicker/WdatePicker.js"></script>
<!--地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xzQ89rGL61tuBjTdlQCRRlShOQ9WLTNd"></script>
<script type="text/javascript" src="/resources/js/mapJs/map_baidu.js"></script>
<link href="/resources/js/mapJs/map_baidu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resources/js/mapJs/DistanceTool_min.js"></script>
</head>
<body>
<div>
	<form id="listForm">
		<div id="map" style="height:99%;width:99%;position:absolute;">
		</div>
		<input id="search" type="text" class="searchbox-content-common"/>
		<input type="button" id="" class="searchbox-content-common search_map button" onClick="search_key()"/>
		<div id="searchResultPanel" class="searchResultPanel"></div>
		
		<div class="ui3-control-wrap">
			<div class="left float-l"> 
			   <div class="trafficopt map" map-on-click="traffic"> 
			   		<ul>
				    <span class="span_map_type"></span>
				    <i>地图类型</i> 
				    </ul>
				   <div class="hidden-box-map" style="display:none;">
				    	<ul> 
					    	<span class="span_map1"></span>
						    <i style="color: #579AFC" onClick="bmap.changeMapType(BMAP_NORMAL_MAP);">平面地图</i> 
					  	</ul> 
					  	<ul> 
					    	<span class="span_map2"></span>
						    <i onClick="bmap.changeMapType(BMAP_HYBRID_MAP);">卫星地图</i> 
					  	</ul> 
					</div>
			   </div> 
			    <b></b>
			   <div class="trafficopt tool" map-on-click="traffic"> 
			   		<ul>
				    <span class="span_map_tool"></span>
				    <i>工具箱</i> 
				    </ul>
				   <div class="hidden-box-tool" style="display:none;">
					  	<ul> 
					    	<span class="span_map_ruler"></span>
						    <i onClick="bmap.opanRanging();">测距</i> 
					  	</ul> 
					</div>
			   </div>
		  </div>
	  </div>
	 
	 <div class="xxDialog" style="width: 235px; height: 205px; left: 13px; top: 160px; display: block; margin: 0px; z-index: 106;">
		<div class="dialogTitle" style="cursor: auto;">历史轨迹</div>
		<div class="dialogContent">
			<table class="input input-edit" style="width:100%">
				<tbody>
					<tr>
						<th>终端设备：</th>
						<td><input class="text" id="selectList" name="terminalNum" value="${terminalNum}" type="text"><input id="speedSelect" value="0.75" type="hidden"></td>
					</tr>
					<tr>
						<th>开始时间：</th>
						<td><input class="Wdate text" id="startTime" name="startTime" onclick="WdatePicker({onpicking:function(dp){changeEndTime(dp.cal.getNewDateStr());},dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})" readonly="readonly" type="text" value="${startTime}"></td>
					</tr>
					<tr>
						<th>结束时间：</th>
						<td><input class="Wdate text" id="endTime" name="endTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'#F{$dp.$D(\'startTime\',{d:2})}'})" readonly="readonly" type="text" value="${endTime}"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="dialogBottom">
			<input class="button sureButton" value="查询" type="button" onclick="showTrack()">
			<input class="button daochuButton" value="导出" type="button" onclick="segmentedExport(this)">
		</div>
	</div>
	</form>
</body>
<script type="text/javascript">
/**
 * 实例化地图
 * 
 * 初始化地图id
 * 是否需要绘制区域
 * 是否需要定位
 * 是否需要大小按钮
 * 是否需要搜索按钮
 */
// bmap.init('map',false,false,true,true);

var positionList = [];//位置信息集合
var sTime;
var eTime;
[#if points?size > 0]
	[#list points as point]
		positionList.push(new BMap.Point(${point.longitude},${point.latitude}));
		[#if point_index == 0]sTime = '${point.gps_time}'[/#if]
		[#if point_index == points?size - 1]eTime = '${point.gps_time}'[/#if]
	[/#list]
	bmap.init('map',false,false,true,true,[positionList[0], positionList[positionList.length - 1]]);
[#else]
	bmap.init('map',false,false,true,true);
[/#if]

if (positionList.length > 0) {
	window.setTimeout(function(){
	    var parm = {
			strokeColor : "blue", //边线颜色。
			strokeWeight : 5, //边线的宽度，以像素为单位。
			strokeOpacity : 0.8, //边线透明度，取值范围0 - 1。
			strokeStyle : 'solid' //边线的样式，solid或dashed。
		};
	    var polyline = new BMap.Polyline(positionList, parm);
		bmap.map.addOverlay(polyline);
		showStartAndEnd(positionList[0], positionList[positionList.length - 1]);	
		positionList.length = 0;
	}, 500);
}

/* 显示起点和终点的位置 */
function showStartAndEnd(spoint, epoint) {
	// 添加起点标注
	bmap.map.addOverlay(createSpecialIcon(spoint,"/resources/images/start_point.png", "起：" + sTime));
	// 添加终点标注
	bmap.map.addOverlay(createSpecialIcon(epoint,"/resources/images/end_point.png", "终：" + eTime));
}

/*创建起点终点的特殊样式*/
function createSpecialIcon(point, icon_path, labelTxt) {
	var icon = new BMap.Icon(
			icon_path, 
			new BMap.Size(32,32),
			{
				imageSize:new BMap.Size(32,32),
				imageOffset:new BMap.Size(0,0)
			}
		);
	var marker = new BMap.Marker(point,{icon:icon, offset: new BMap.Size(0,-13)});
	var label = new BMap.Label(labelTxt, {offset:new BMap.Size(21,-16)});
	label.setStyle({fontFamily:"微软雅黑"});
	marker.setLabel(label);

	return marker;
}

/*根据条件查询历史轨迹点*/
function findHistoryPositions(){
	var terminalNum = $("#selectList").val();
	var startTime = $("#startTime").val();
	var endTime = $("#endTime").val();
	ajaxSubmit($(terminalNum),{
		method:'post',
		url:"/realtime_monitor/findHistoryPositions.jhtml",
		data: {
			"terminalNum":terminalNum,
			"startTime":startTime,
			"endTime":endTime,
		},
		async:false,
		callback: function(data) {
			var points = data.objx;
			positionList = [];
			if (points != null && points.length > 0) {
			    for(var n=0;n<points.length;n++) {
			    	var point = points[n];
			        positionList.push(new BMap.Point(point.longitude,point.latitude));
			        if (n == 0) {
			        	sTime = point.gps_time;
			        }
			        if (n == points.length - 1) {
			        	eTime = point.gps_time;
			        }
			    }
			}	
		}
	});
}

/* 显示历史轨迹坐标集 */
function showTrack() {

	/*点击按钮3秒后才可以继续点*/
	$(".sureButton").attr("disabled",true);
	window.setTimeout(function(){
		$(".sureButton").attr("disabled",false);
	},3000);

	/*先清除地图上的轨迹信息*/
	clearTrack();
	/*获取轨迹集合*/
	findHistoryPositions();
	if(positionList != null&& positionList.length>0){
	    var parm = {
			strokeColor : "blue", //边线颜色。
			strokeWeight : 5, //边线的宽度，以像素为单位。
			strokeOpacity : 0.8, //边线透明度，取值范围0 - 1。
			strokeStyle : 'solid' //边线的样式，solid或dashed。
		};
		// 创建画线对象
	    var polyline = new BMap.Polyline(positionList, parm);
		bmap.map.addOverlay(polyline);
		// 标出起始坐标点
		showStartAndEnd(positionList[0], positionList[positionList.length - 1]);
		// 以最佳的视图显示轨迹坐标
		var viewport = bmap.map.getViewport([positionList[0], positionList[positionList.length - 1]]);
		bmap.map.centerAndZoom(viewport.center, viewport.zoom);
	}else{
		$.message_alert("终端在该时间段内没有轨迹信息");
		return false;
	}
	
}

/*清除轨迹信息*/
function clearTrack() {
	bmap.map.clearOverlays();
	positionList.length = 0;
}

/*根据开始时间改变结束时间*/
function changeEndTime(newDateStr) {

	var startDate = new Date(newDateStr.replace(/-/g, "/"));
	var etime = startDate.getTime() + 1000*60*60*48;
	var nowEndDate = new Date($("#endTime").val().replace(/-/g, "/"));
	if (etime < nowEndDate.getTime() || nowEndDate.getTime() < startDate.getTime()) {
		var endDate = new Date();
	    endDate.setTime(etime);
	    var strYear = endDate.getFullYear();
		var strDay = endDate.getDate();
		var strMonth = endDate.getMonth() + 1;
		if (strMonth < 10) {
			strMonth = "0" + strMonth;
		}
		if (strDay < 10) {
			strDay = "0" + strDay;
		}
		var strhour = endDate.getHours();
		if (strhour < 10) {
			strhour = "0" + strhour;
		}
		var strmin = endDate.getMinutes();
		if (strmin < 10) {
			strmin = "0" + strmin;
		}
		var strsecond = endDate.getSeconds();
		if (strsecond < 10) {
			strsecond = "0" + strsecond;
		}
		var endTime = strYear + "-" + strMonth + "-" + strDay + " " + strhour + ":" + strmin + ":" + strsecond;
		$("#endTime").val(endTime);
	}
}

//条件导出		    
function segmentedExport(e){
	var needConditions = false;//是否至少一个条件
	var page_url = 'to_condition_export.jhtml';//分页导出统计页面
	var url = 'condition_export.jhtml';//导出的方法
	conditions_export(e,{needConditions:needConditions,page_url:page_url,url:url,data:$("div.dialogContent").find("[name]").serialize()});
}
</script>
</html>